{% extends 'base.html' %}

{% block extra_body_class %}fullwidth{% endblock %}

{% block content %}
        <link rel="stylesheet" href="../static/css/stylesb.css">
<div class="login-container">
    <h2>注 册</h2>
    <form method="POST" class="login-form">
        {% csrf_token %}
        <div class="form-group">
            <label for="role">注册类型：</label>
            <select name="role" id="role" required class="input-field">
                <option value="teacher">教师</option>
                <option value="student">学生</option>
            </select>
        </div>
        <div class="form-group">
            <label for="name">姓名：</label>
            <input type="text" class="input-field" name="name" id="name" required>
        </div>
        <div class="form-group">
            <label for="email">邮箱：</label>
            <input type="email" class="input-field" name="email" id="email" required>
        </div>

        <div class="form-group">
            <label for="password">密码：</label>
            <input type="password" class="input-field" name="password" id="password" required>
        </div>

        <button type="submit" class="submit-btn">注册</button>
    </form>
</div>

<style>
body {
    background-color: rgb(240, 255, 250); /* 页面统一浅绿背景 */
}

body.fullwidth .container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.login-container {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    padding: 10px;
    max-width: 400px;
    margin: 100px auto; /* 居中 */
}

h2 {
    text-align: center;
    margin-bottom: 20px;
    color: rgb(0, 70, 58);
}

.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: rgb(0, 70, 58);
}

.input-field {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.submit-btn {
    width: 100%;
    padding: 10px;
    background-color: rgb(0, 161, 133);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.submit-btn:hover {
    background-color: rgb(0, 120, 100);
}
</style>
{% endblock %}
